<template>
    <div>
        <el-form :model="dynamicData" ref="dynamicData" style="text-align:left" :inline="false">
            <div v-for="(domain, index) in dynamicData.domains" :key="index">
                <el-form-item class="formItemHeader" label="类型" :prop="'domains.' + index + '.type'" :rules="{
                                required: true, message: '类型不能为空', trigger: 'blur'
                                }">
                    <el-radio-group v-model="domain.type">
                        <el-radio label="1">论文</el-radio>
                        <el-radio label="2">比赛</el-radio>
                        <el-radio label="3">专利</el-radio>
                        <el-radio label="4">其他</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="formItemHeader" label="时间" :prop="'domains.' + index + '.time'" :rules="{
                                required: true, message: '时间不能为空', trigger: 'blur'
                                }">
                    <el-date-picker v-model="domain.time" value-format="yyyy-MM-dd" type="date"></el-date-picker>
                </el-form-item>

                <el-form-item class="formItemHeader" label="名称" :prop="'domains.' + index + '.name'" :rules="{
                                required: true, message: '名称不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.name" type="text"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader" label="描述" :prop="'domains.' + index + '.content'" :rules="{
                                required: true, message: '描述不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.content" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader">
                    <el-button class="formBtn" icon="el-icon-delete" type="danger"
                               @click.prevent="removeDomain(domain)"></el-button>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button class="formBtn" icon="el-icon-plus" type="success" @click="addDomain"></el-button>
                <!-- <el-button @click="resetForm('dynamicData')">重置</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

export default {
    props: {
        dynamicData: {
            type: Object,
            default: function () {
                return {};
            }
        },
        timestamp: {
            type: String,
            default: function () {
                return '';
            }
        }
    },
    data() {
        return {}
    },
    // watch: {
    //     timestamp() {
    //         this.submitForm0('dynamicData');
    //     }
    // },
    methods: {
        // submitForm0(formName) {
        //     this.$refs[formName].validate((valid) => {
        //         if (valid) {
        //             this.$emit('dynamicFormChange', this.dynamicData.domains)
        //         } else {
        //             console.log('error submit!!');
        //             this.$emit('dynamicFormChange', false)
        //         }
        //     });
        // },
        // resetForm(formName) {
        //     this.$refs[formName].resetFields();
        // },
        removeDomain(item) {
            this.$confirm('确定删除此记录吗？', '提示').then(() => {
                const index = this.dynamicData.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicData.domains.splice(index, 1)
                }
            }).catch(() => {
            });
        },
        addDomain() {
            this.dynamicData.domains.push({
                type: '',
                time: '',
                name: '',
                content: '',
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.formItemHeader {
  //display: inline-block;
  //margin-right: 10px;
  //width: 30%;
  margin-bottom: 20px;
}

.formItemHeader:last-of-type {
  //width: 400px;
}

.formItem {
  display: inline-block;
  margin-right: 10px;
  width: 30%;
  margin-bottom: 20px;
}

.formBtn {
  width: 100%;
}
</style>
